import React from 'react'
import './index.scss'
import { useNavigate } from 'react-router-dom'


export default function Footer() {
  const navigate=useNavigate()
  const lis=document.querySelectorAll('.nav li')
  lis.forEach(li=>{
    li.addEventListener('click',function(){
      lis.forEach(item=>{
        item.classList.remove('active')
        this.classList.add('active')
      })
    })
  })
  return (
    // <Sticky position='bottom'>
      <ul className='nav'>
        <li className='active' onClick={() => navigate('/app/home')}>
          <i className='iconfont icon-shouye'></i>
          <span>首页</span>
        </li>
        <li onClick={() => navigate('/app/search')}>
          <i className='iconfont icon-sousuo'></i>
          <span>搜索</span>
        </li>
        <li onClick={() => navigate('/app/collect')}>
          <i className='iconfont icon-shoucang1'></i>
          <span>收藏</span>
        </li>
        <li onClick={() => navigate('/app/my')}>
          <i className='iconfont icon-my'></i>
          <span>我的</span>
        </li>
        <div className="indicator">
        </div>
      </ul>
    // </Sticky>
  )
}
